<template>
  <div class="center_assessment">
    <cn-title title="考核分析大数据">
      <div class="score_data">
        <span>得分：84.5</span>
        <span class="m_l_40">排名：第2名</span>
      </div>
    </cn-title>
    <div class="assessment_container">
      <div class="chart_box">
        <cn-label label="数据项考核指标分析" />
        <div class="chart_content">
          <div class="chart_title d_a_c">
            <div class="title1">标准考核分值</div>
            <div class="title2">实际考核分值</div>
          </div>
          <div id="assessmentChart1" class="chart_1"></div>
        </div>
      </div>
      <div class="chart_box_2">
        <cn-label label="非数据项考核指标分析" imgWidth="25%" textWidth="50%" />
        <div class="table_box scroll_container">
          <table class="table">
            <tr>
              <td class="td1">序号</td>
              <td class="td2">非数据项名称</td>
              <td>完成情况</td>
            </tr>
            <tr v-for="(item, index) in dataList" :key="index">
              <td class="td1">
                <div class="xh_td">
                  <img src="@/assets/img/xuhao.png" alt="" />
                  <span>{{ index + 1 }}</span>
                </div>
              </td>
              <td class="td2">{{ item.name }}</td>
              <td>
                <div
                  :class="['status', item.status == 1 ? 'success' : 'error']"
                >
                  {{ item.status == 1 ? "已完成" : "未完成" }}
                </div>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CnTitle from "../common/CnTitle.vue";
import CnLabel from "../common/CnLabel.vue";
export default {
  components: {
    CnTitle,
    CnLabel,
  },
  data() {
    return {
      dataList: [
        {
          name: "高标准方案和规划",
          status: 1,
        },
        {
          name: "企业奖励",
          status: -1,
        },
        {
          name: "电商特殊馆",
          status: 1,
        },
        {
          name: "电商培训服务中心",
          status: 1,
        },
        {
          name: "建立运行管理制度",
          status: -1,
        },
        {
          name: "品牌宣传",
          status: 1,
        },
        {
          name: "电商孵化中心",
          status: 1,
        },
        {
          name: "电商公共服务中心",
          status: -1,
        },
        {
          name: "公共服务平台",
          status: 1,
        },
        {
          name: "企业奖励",
          status: -1,
        },
        {
          name: "电商特殊馆",
          status: 1,
        },
        {
          name: "电商培训服务中心",
          status: 1,
        },
        {
          name: "建立运行管理制度",
          status: -1,
        },
        {
          name: "品牌宣传",
          status: 1,
        },
        {
          name: "电商孵化中心",
          status: 1,
        },
        {
          name: "电商公共服务中心",
          status: -1,
        },
        {
          name: "公共服务平台",
          status: 1,
        },
      ],
    };
  },
  mounted() {
    this.renderAssessmentChart1();
  },
  methods: {
    renderAssessmentChart1() {
      let myChart = this.$echarts.init(
        document.getElementById("assessmentChart1")
      );
      var xData = [
        "培育核心特殊产业",
        "供应链下沉",
        "金融服务",
        "小而美自主品牌",
        "引进电商培训机构",
        "举办创新大赛",
        "E镇宣传活动",
        "年生产总值增长率",
        "壮大市场主体",
        "总投资规模",
        "数据1",
        "数据2",
        "数据3",
        "数据4",
        "数据5",
        "数据6",
      ];
      var lastYearData = [
        3, 20, 42, 34, 35, 45, 33, 42, 34, 25, 60, 80, 60, 80, 12, 12,
      ];
      var thisYearData = [
        11, 38, 23, 39, 46, 36, 29, 23, 39, 16, 60, 80, 60, 80, 12, 12,
      ];
      let legend = ["标准考核分值", "实际考核分值"];
      let textColor = "#AED0EF";
      let lineColor = "rgba(255,255,255,0.2)";

      let option = {
        baseOption: {
          timeline: {
            show: false,
            top: 0,
            data: [],
          },
          tooltip: {
            trigger: "axis",
            // type:'shadow',
            axisPointer: {
              type: "shadow",
            },
            formatter: "{a}<br/>{b} :\n\n{c}",
          },
          grid: [
            // 左边
            {
              show: false,
              left: "2%",
              top: "4%",
              bottom: "5%",
              containLabel: true,
              width: "37%",
            },
            // 中间
            {
              show: false,
              left: "52%",
              top: "4%",
              bottom: "5%",
              width: "0%",
            },
            // 右边
            {
              show: false,
              right: "2%",
              top: "4%",
              bottom: "5%",
              containLabel: true,
              width: "37%",
            },
          ],
          xAxis: [
            {
              type: "value",
              inverse: true,
              axisLine: {
                show: true,
                lineStyle: {
                  color: "rgba(45, 67, 119, 0.8)",
                },
              },
              axisTick: {
                show: false,
              },
              position: "bottom",
              axisLabel: {
                show: true,
                color: textColor,
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "#2D4377",
                  type: "dashed",
                },
              },
            },
            {
              gridIndex: 1,
              show: false,
            },
            {
              gridIndex: 2,
              axisLine: {
                show: true,
                lineStyle: {
                  color: "rgba(45, 67, 119, 0.8)",
                },
              },
              axisTick: {
                show: false,
              },
              position: "bottom",
              axisLabel: {
                show: true,
                color: textColor,
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "#2D4377",
                  type: "dashed",
                },
              },
            },
          ],
          yAxis: [
            {
              type: "category",
              inverse: true,
              position: "right",
              axisLine: {
                show: true,
                lineStyle: {
                  color: lineColor,
                },
              },

              axisTick: {
                show: false,
              },
              axisLabel: {
                show: false,
              },
              data: xData,
            },
            {
              gridIndex: 1,
              type: "category",
              inverse: true,
              position: "left",
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                show: true,
                // padding:[10,0,0,0],
                textStyle: {
                  color: "#FBFDFF",
                  fontSize: 12,
                },
                align: "center",
              },
              data: xData.map(function (value) {
                return {
                  value: value,
                  textStyle: {
                    align: "center",
                  },
                };
              }),
            },
            {
              gridIndex: 2,
              type: "category",
              inverse: true,
              position: "left",
              axisLine: {
                show: true,
                lineStyle: {
                  color: lineColor,
                },
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                show: false,
              },
              data: xData,
            },
          ],
          dataZoom: [
            {
              type: "slider",
              maxValueSpan: 9, //显示数据的条数(默认显示10个)
              show: true,
              yAxisIndex: [0],
              handleSize: 0, //滑动条的 左右2个滑动条的大小
              height: "90%", //组件高度
              left: 750, //左边的距离
              right: 8, //右边的距离
              top: 0, //上边边的距离
              borderColor: "rgba(43,48,67,0.8)",
              showDataShadow: false, //是否显示数据阴影 默认auto
              showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
              realtime: true, //是否实时更新
              filterMode: "filter",
              yAxisIndex: [0, 2], //控制的y轴
            },
            //滑块的属性
            {
              type: "inside",
              show: true,
              yAxisIndex: [0, 1],
              maxValueSpan: 9, //显示数据的条数(默认显示10个)
            },
          ],
          series: [],
        },
        options: [],
      };

      // option.baseOption.timeline.data.push(timeLineData[0])
      option.options.push({
        series: [
          {
            name: "标准考核分值",
            type: "bar",
            barWidth: 3,
            stack: "1",
            itemStyle: {
              borderRadius: 4,
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#0094F5",
                  },
                  {
                    offset: 1,
                    color: "#0F1F45",
                  },
                ],
              },
            },
            label: {
              normal: {
                show: false,
              },
            },
            data: lastYearData,
            animationEasing: "elasticOut",
          },
          {
            name: "外圆",
            type: "scatter",
            emphasis: {
              scale: false,
            },
            symbolSize: 10,
            itemStyle: {
              shadowBlur: 5,
              borderWidth: 1,
              opacity: 1,
              color: "rgba(0,0,0,1)",
              borderColor: "#0094F5",
            },
            z: 2,
            data: lastYearData,
          },
          {
            name: "内圆",
            type: "scatter",
            emphasis: {
              scale: false,
            },
            symbolSize: 4,
            itemStyle: {
              color: "#fff",
              shadowColor: "rgba(255, 255, 255, 0.5)",
              shadowBlur: 5,
              borderWidth: 1,
              opacity: 1,
            },
            z: 2,
            data: lastYearData,
          },
          {
            name: "实际考核分值",
            type: "bar",
            stack: "2",
            barWidth: 4,
            xAxisIndex: 2,
            yAxisIndex: 2,
            itemStyle: {
              borderRadius: 4,
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#0F1F45",
                  },
                  {
                    offset: 1,
                    color: "#DE9C09",
                  },
                ],
              },
            },
            label: {
              normal: {
                show: false,
              },
            },
            data: thisYearData,
            animationEasing: "elasticOut",
          },
          {
            name: "外圆",
            type: "scatter",
            emphasis: {
              scale: false,
            },
            xAxisIndex: 2,
            yAxisIndex: 2,
            symbolSize: 10,
            itemStyle: {
              shadowBlur: 5,
              borderWidth: 1,
              opacity: 1,
              color: "rgba(0,0,0,1)",
              borderColor: "#DB9A0A",
            },
            z: 2,
            data: thisYearData,
          },
          {
            name: "内圆",
            type: "scatter",
            emphasis: {
              scale: false,
            },
            xAxisIndex: 2,
            yAxisIndex: 2,
            symbolSize: 4,
            itemStyle: {
              color: "#fff",
              shadowColor: "rgba(255, 255, 255, 0.5)",
              shadowBlur: 5,
              borderWidth: 1,
              opacity: 1,
            },
            z: 2,
            data: thisYearData,
          },
        ],
      });

      myChart.setOption(option, { notMerge: true });
    },
  },
};
</script>

<style lang="scss" scoped>
.center_assessment {
  margin-top: 10px;
  height: calc(100% - 627px - 10px);
  margin-top: 627px;
  .score_data {
    color: #fff;
    font-size: 22px;
    margin-right: -180px;
  }
  .assessment_container {
    display: flex;
    width: 100%;
    height: calc(100% - 45px);
    justify-content: space-between;
    .chart_box {
      width: 760px;
      .chart_content {
        height: calc(100% - 30px);
        width: 100%;
        .chart_title {
          justify-content: space-around;
          color: #fff;
          font-size: 12px;
          .title1,
          .title2 {
            text-align: center;
            width: 150px;
            height: 18px;
          }
          .title1 {
            background-image: url("@/assets/img/bt_bg1.png");
            background-size: cover;
          }
          .title2 {
            background-image: url("@/assets/img/bt_bg2.png");
            background-size: cover;
          }
        }
        .chart_1 {
          height: calc(100% - 18px);
          width: 100%;
        }
      }
    }
    .chart_box_2 {
      width: calc(100% - 790px);
      height: 100%;
      .table_box {
        height: 350px;
        .table {
          color: #aed0ef;
          font-size: 12px;
          width: 100%;
          border-collapse: collapse;

          .xh_td {
            position: relative;
            span {
              position: absolute;
              top: 50%;
              left: 0;
              display: inline-block;
              transform: translateY(-50%);
              width: 25px;
              text-align: center;
            }
          }
          tr {
            width: 100%;
            height: 35px;
          }
          tr:nth-child(even) {
            background: #00103b;
          }
          td {
            text-align: left;
          }
          .td1 {
            width: 75px;
          }
          .td2 {
            width: 300px;
          }
          .status {
            width: 60px;
            height: 20px;
            text-align: center;
            line-height: 20px;
          }
          .success {
            background: rgba(1, 254, 169, 0.3);
            color: #01fea9;
          }
          .error {
            background: rgba(254, 30, 30, 0.3);
            color: #fe1e1e;
          }
        }
      }
    }
  }
}
</style>